<template>
  <div>
    <el-tree
  :data="list"
  show-checkbox
   node-key="id"
   :default-checked-keys="this.info"
  @check="handleNodeClick"
  :props="{ label: 'name'}">
</el-tree>
   <div slot="footer" class="dialog-footer">
    <el-button size="small" @click="quxiao">取 消</el-button>
    <el-button size="small" type="primary" @click="queding">确 定</el-button>
  </div>  
  </div>
  
</template>

<script>
import {menutree,distribution,knife} from '@/api/limits'
import arrayToTree from "array-to-tree";
export default {
    props:{
    childata:{
      type: Object,
      require: true
    },
    },
data () {
  return {
    list:[],
    datainfo:{
      roleId: '',
      menuIds: []
     },
     info:[]
  }
},
created(){
  this.loakef()
    this.loachand()
},
methods: {
    // 查看拥有得菜单
  async loakef(){
     const params = new URLSearchParams();
        params.append("roleId",this.childata.id); //
   const res = await knife(params)
     this.info = res.data
     console.log(this.info);

  },
  // 选择菜单
  handleNodeClick(id,item){
     this.datainfo.menuIds = item.checkedKeys.concat(item.halfCheckedKeys)
  },
  
 async loachand(){
   const res = await menutree()
   const treedata = arrayToTree(res.data,{
    parentProperty:"parentId",
    customID:"id"
   })
   this.list = treedata
   this.list = this.list.sort((a,b) => a.order - b.order)
   for(let i = 0; i < this.list.length; i++){
    this.list[i].children = this.list[i].children.sort((c,d) => c.order - d.order)
   }
   
    this.datainfo.roleId = this.childata.id
  },

    // 取消
  quxiao(){
    this.$emit('close')
  },
  // 确定
 async queding(){
    const rex = await distribution(this.datainfo)
    this.$message.success(rex.msg)

    this.$emit('close')
  }
}
}
</script>

<style scoped>
.dialog-footer{
  height: 25px;
  width: 90%;
  
  background-color: #fff;
  z-index: 999;
  text-align: center;
}

</style>